<template>
  <div class="home page-component">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in 1" :key="item">
        <img src="~assets/images/banner1.png" alt="" />
      </el-carousel-item>
      <el-carousel-item v-for="item in 1" :key="item">
        <img src="~assets/images/banner2.png" alt="" />
      </el-carousel-item>
    </el-carousel>
    <!-- 搜索 -->
    <div class="search-container">
      <div class="search-wrapper">
        <div class="hospital-search">
          <el-autocomplete
            class="search-input"
            prefix-icon="el-icon-search"
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="点击输入科室名称"
            @select="handleSelect"
          >
            <span
              slot="suffix"
              class="search-btn v-link highlight clickable selected"
              >搜索
            </span>
          </el-autocomplete>
        </div>
      </div>
    </div>
    <!-- bottom -->
    <div class="bottom">
      <div
        style="background: #fff48b; padding: 10px 14px; margin: -20px 0 30px 0"
      >
        <a href="/" target="_blank" style="color: #c56318; display: block"
          >重要通知：井陉县中医院预约挂号 重要通知</a
        >
      </div>

      <div class="bigTitle">
        <span class="jiazai" v-if="isshowloading">
          <img src="/doctor_appointment/static/images/yygh/jiazai.gif" alt="" />
          正在加载所有科室信息，请稍后。。。。
        </span>

        <ul class="departmentList">
          <li
            v-for="(item, index) in departmentVoList"
            :key="item.id"
            :class="index == 0 ? 'selected' : ''"
            :id="item.depcode"
          >
            <div class="bigTitle">
              <span
                ><img src="~assets/images/departmentIcon.png" alt="" />
              </span>
              {{ item.depname }}
            </div>
            <ul class="littleDepartment">
              <li
                v-for="it in item.children"
                :key="it.id"
                @click="schedule(it.depcode)"
                class="v-link clickable"
              >
                {{ it.depname }}
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import hospApi from "@/api/hosp/hospital";
import dictApi from "@/api/cmn/dict";
import cookie from 'js-cookie';
import userInfoApi from '@/api/user/userInfo'

export default {
  //服务端渲染异步，显示科室列表
  asyncData ({ params, error }) {
    //调用
    return hospApi.findDepartment("130121_1")
      .then(response => {
        return {
          departmentVoList: response.data
        }

      })
  },
  data () {
    return {
      searchObj: {},
      page: 1,
      limit: 10,

      state: "",
      hoscode: "130121_1", //医院编号
      hosname: "", //医院名称
      hostypeList: [], //医院等级集合
      districtList: [], //地区集合

      hostypeActiveIndex: 0,
      provinceActiveIndex: 0,
      activeIndex: 0,

      hospital: {
        param: {},
      },
      bookingRule: {},
      departmentVoList: [],
    };

  },
  created () {
    this.hoscode = "130121_1";
    this.init();
  },
  methods: {
    init () {
      //根据医院编号查询医院详情
      hospApi.show(this.hoscode).then((response) => {
        this.hospital = response.data.hospital;
        this.bookingRule = response.data.bookingRule;
      });
    },
    move (index, depcode) {
      this.activeIndex = index;
      document.getElementById(depcode).scrollIntoView();
    },
    //
    schedule (depcode) {
      // 登录判断
      let token = cookie.get('token')
      if (!token) {
        loginEvent.$emit('loginDialogEvent')
        return
      }
      //判断用户是否完成认证
      userInfoApi.getUserInfo().then(response => {
        let authStatus = response.data.authStatus
        //authStatus不等于2,没有认证成功
        if (!authStatus || authStatus != 2) {
          window.location.href = "/user"
          return
        }
      })
      window.location.href = '/hospital/schedule?hoscode=' + this.hoscode + "&depcode=" + depcode
    },
  },

}


</script>

<style>
.departmentList {
  display: block !important;
}
.departmentList .bigTitle {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 15px !important;
}
.departmentList .littleDepartment {
  display: flex;
}
.departmentList .bigTitle span {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  margin-right: 0.3em;
  position: relative;
  top: -1px;
}
.departmentList .bigTitle span img {
  width: 100%;
}
.departmentList .littleDepartment li {
  margin: 0px 10px 15px 10px;
  color: #0b68a1;
  font-size: 16px;
}
.departmentList .littleDepartment li:hover {
  cursor: pointer;
}
</style>